<template>
    <div class="play-container-box" :class="{ 'over-class': isOver }">
        <a class="global-vclose" @click="handleClose"></a>
        
        <template v-if="!isthird">
            <div class="cover-blur">
                <img loading="lazy" :src="data.image" alt="">
            </div>
            <div class="xgp-video" id="xgp_video">

            </div>
            <div class="basic" v-if="data.member">
                <div class="author">@{{ data.member.userName }}<span class="time">6天前发布</span></div>
                <div class="title">{{ data.title }}</div>
            </div>
            <div class="bot-mask">

            </div>
        </template>
        <iframe class="ifrm-play" :src="'//player.bilibili.com/player.html?isOutside=true&bvid='+data.vid+'&p=1'" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" v-else-if="data.type=='bilibili'"></iframe>
        <iframe class="ifrm-play" frameborder="0" :src="data.url+'&autoplay=1'" allowFullScreen="true" v-else></iframe>
        {{ data.vid }}
    </div>
</template>

<script>
import 'xgplayer/dist/index.min.css';
import XgPlayer from 'xgplayer'
export default {
    data() {
        return {
            isoverflow:true,
            isOver: false,
            xPlayer: null
        }
    },
    props:
    {
        data:{
            type:Object,
            default:{}
        },
        isthird:{
            type:Boolean,
            default:false
        },
        ismustoverflow:{
            type:Boolean,
            default:true
        }
    },
    //  [
    // {data:{
    //     type:Object,
    //     default:{}
    // }}, 
    // ,'isthird',{
    //     ismustoverflow:{
    //         type:Boolean,
    //         default:true
    //     }
    // }],
    mounted() {
        let that = this;
        this.$nextTick(() => {
            if(!that.isthird){
                that.initPlayer();
                console.log(that.ismustoverflow)
                if(that.ismustoverflow)
                {
                    document.body.style.overflow = 'hidden'
                }
                setTimeout(() => {
                    that.xPlayer.play();
                }, 300)
            }
        })
    },
    methods: {
        handleClose() {
            let that = this;
            if(!this.isthird){
                if(this.ismustoverflow)
                {
                    document.body.style.overflow = 'inherit'
                }
                this.xPlayer.destroy();
                this.isOver = true;
                setTimeout(() => {
                    that.isOver = false;
                    that.$emit('close');
                }, 300)
            }else{
                that.$emit('close');
            }
        },
        initPlayer() {
            this.xPlayer = new XgPlayer({
                id: 'xgp_video',
                controls: true,
                enableContextmenu: true,
                url: this.data.videoList[0].content,
                loop: true,
                lang: 'zh',
                // fitVideoSize:'auto',
                // poster:that.list[idx].image,
                width: '100%',
                height: '100%',
                autoplay: false,
                videoInit: true
            })
        }
    }
}
</script>
<style lang="less">
/* 定义淡出动画 */
@keyframes fadeIn {
    from {
        /* 动画开始时 */
        transform: translate3d(0px, -1000px, 0px);
    }

    to {
        /* 动画结束时 */
        transform: translate3d(0px, 0px, 0px);
    }
}

/* 定义淡出动画 */
@keyframes fadeOut {
    from {
        /* 动画开始时 */
        transform: translate3d(0px, 0px, 0px);
    }

    to {
        /* 动画结束时 */
        transform: translate3d(0, -1000px, 0px);
    }
}

.play-container-box {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    right: 0px;
    height: 100%;
    z-index: 1000;
    background: #fff;
    animation: fadeIn .3s ease forwards;

    &.over-class {
        animation: fadeOut .3s ease-in-out forwards;
    }

    .xgp-video {}

    .cover-blur {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .8;
            filter: blur(60px);
        }
    }

    .basic {
        position: absolute;
        bottom: 79px;
        padding-left: 34px;
        // padding-bottom:28px;
        padding-right: 38px;
        left: 0px;
        right: 0px;
        z-index: 101;

        .author {
            font-size: 20px;
            font-weight: 500;

            .time {
                font-size: 14px;
                font-weight: normal;
            }
        }

        .title {
            font-size: 16px;
            line-height: 22px;
            margin-top: 16px;
            margin-bottom: 44px;
        }
    }
    
    .bot-mask{
        position: absolute;
        bottom:0px;
        right:0px;left:0px;
        height:233px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
        z-index:100;
    }
}
</style>